<template>
  <view class="page">
    <UserDate/>
    <u-tabs class="page-top-full" :active-color='themeColorLight' bar-width='100' :list="tabs" :is-scroll="false" :current="currentTab" @change="change"></u-tabs>
    
    <view class="tcard">
      <view class="title">
        2024年09月10日
      </view>
      
      <view class="items">
        <view class="item" v-for="i in 3" :key="i">
          <view class="top flexR">
            <text class="name">H203_电解质4项+H003_肝功能10项+H255_血脂4项+H202_血脂全套1</text>
            <text class="tip">已出</text>
          </view>
          <view class="bottom flexR">
            <text class="time">2024-09-10 12:00</text>
            <text class="todtl" @click="toDetail">点击查看 >></text>
          </view>
        </view>
      </view>
    </view>
  
  </view>
</template>

<script>
  import UserDate from '@/components/UserInfo/user-date.vue'
  import { themeColorLight } from '@/static/js/theme.js'
  export default {
    components: {UserDate},
    data() {
      return {
        themeColorLight,
        tabs: [{name: '检查检验报告'}, {name: '门诊电子病历'}],
        currentTab: 0
      }
    },
    methods: {
      change(currentTab) {
        this.currentTab = currentTab
      },
      toDetail() {
        uni.navigateTo({
          url: `./Detail`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.items {
  border-top: 1px solid rgba(0,0,0,0.12);
  .item {
    border-bottom: 1px dashed rgba(0,0,0,0.4);
    padding: 24upx 0;
    &:nth-last-child(1) {
      border: none;
    }
    .top {
      justify-content: space-between;
      align-items: flex-start;
      gap: 60upx;
      .name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28upx;
        color: rgba(0,0,0,0.8);
        line-height: 44upx;
      }
      .tip {
        flex-shrink: 0;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24upx;
        color: #FFFFFF;
        line-height: 36upx;
        padding: 0 14upx;
        background-color: #5DD2B1;
        border-radius: 4upx;
      }
    }
    .bottom {
      justify-content: space-between;
      align-items: center;
      margin-top: 16upx;
      .time {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24upx;
        color: rgba(0,0,0,0.4);
        line-height: 44upx;
      }
      .todtl {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28upx;
        color: $theme-color;
        line-height: 48upx;
      }
    }
  }
}
</style>
